<template>
  <div id="app">
    <transition :name="transitionName" mode="out-in">
      <router-view class="child-view"></router-view>
    </transition>
    <van-tabbar v-model="$store.state.navactive" v-show="showTab">
      <van-tabbar-item icon="home" to="/index">首页</van-tabbar-item>
      <!-- <van-tabbar-item icon="records" to="/news">新增</van-tabbar-item> -->
      <van-tabbar-item icon="chat" :dot="$store.state.unread" to="/message" v-on:click="$store.state.unread=false">消息</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/me">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import router from './router'
import getUrlParam from './utils/getUrlParam.js'
import Config from './components/project.config.js'
export default {
  name: 'App',
  router,
  data() {
    return {
      active: 0,
      transitionName: 'slide-left'

    }
  },
  computed:{
    showTab: function(){
      return this.$store.state.show
    }
  },
  watch: {
    '$route'(to,from){

    }
  },
  mounted:function(){
    this.$store.commit('hideTab')

  },
  methods:{

  }
}
</script>

<style>

#app {
  height: 100%;
  width: 100%
}
html,body{
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #f8f8f8;
  font-family: 'Roboto', sans-serif;
  font-size: 14px
}
.child-view{
  width: 100%;
  height: 100%;
  transition: all .15s
}
/* .slide-left-enter,.slide-right-leave-active {
     opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.slide-left-leave-active,.slide-right-enter {
     opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
} */

.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}
</style>
